<template>
  <Header />
  <div>
    <div class="ShortVideo">
      <div class="video-title">
        <h2 class="title-text">短视频热榜</h2>
        <div class="video-page">
          <ElPagination small layout="prev, pager, next" :total="8">
          </ElPagination>
        </div>
      </div>
      <div class="video-item">
        <div v-for="(item, index) in videoList" :key="item.vid">
          <div class="video-round">1</div>
          <div
            :style="{ backgroundImage: `url(${item.data.coverUrl})` }"
            class="video-img"
            @click="handleVideo(item.data.vid, index)"
          ></div>
          <h5 class="video-info-title">{{ item.data.title }}</h5>
          <span class="video-info-content">120w热度</span>
        </div>
      </div>

      <div class="video-title">
        <h2 class="title-text">精彩短视频</h2>
        <div class="video-page">
          <!-- <ElPagination small layout="prev, pager, next" :total="8"> </ElPagination> -->
        </div>
      </div>
      <div class="video-item">
        <div v-for="mvitem in mvList" :key="mvitem.id">
          <div
            class="video-img"
            :style="{ backgroundImage: `url(${mvitem.cover})` }"
            @click="handleMv(mvitem.id)"
          />
          <h5 class="video-info-title">{{ mvitem.name }}</h5>
          <StarFilled style="width: 1em; height: 1em; margin-right: 8px" />
          <span class="video-info-content">{{ mvitem.duration }}喜欢</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
  name: 'ShortVideo',
})
</script>

<script lang="ts" setup>
import Header from '@/components/smallJcHeader/Header.vue'
import PubSub from 'pubsub-js'
import { ElPagination } from 'element-plus'
import { StarFilled } from '@element-plus/icons'
import { GetVideoList, GetMvList } from '../../api/VideoList'
import { useRouter } from 'vue-router'
import { onMounted, ref } from 'vue'

const router = useRouter()

const videoList = ref({})
const mvList = ref({})
const mvListAll = ref({})

const avid = ref()
const currentIndex = ref()

onMounted(async () => {
  const result = await GetVideoList()
  videoList.value = result.datas.slice(0, 7)
  const vid = result.datas.map((item) => {
    return item.data.vid
  })
  PubSub.subscribe('videoType', (msg, type) => {
    if (type === 'next') {
      currentIndex.value++
    } else {
      currentIndex.value--
    }

    PubSub.publish('vid', videoList.value[currentIndex.value].data.vid)
  })
})
onMounted(async () => {
  mvListAll.value = await GetMvList(100)
  mvList.value = mvListAll.value.data.slice(0, 7)
  const mvid = mvListAll.value.data.map((mvitem) => {
    return mvitem.id
  })
})
const handleVideo = (vid: number, index) => {
  avid.value = vid
  currentIndex.value = index
  router.push({
    path: '/PlayVideo',
    query: { vid, index },
  })
}
const handleMv = (mvid: number) => {
  router.push({
    path: '/PlayVideo',
    query: { mvid },
  })
}

// 滚动条刷新功能
onMounted(() => {
  window.addEventListener('scroll', handleScroll)
})
// 获取滚动条当前的位置
const getScrollTop = () => {
  let scrollTop = 0
  if (document.documentElement && document.documentElement.scrollTop) {
    scrollTop = document.documentElement.scrollTop
  } else if (document.body) {
    scrollTop = document.body.scrollTop
  }
  return scrollTop
}
// 获取当前可视范围的高度
const getClientHeight = () => {
  let clientHeight = 0
  if (document.body.clientHeight && document.documentElement.clientHeight) {
    clientHeight = Math.min(
      document.body.clientHeight,
      document.documentElement.clientHeight
    )
  } else {
    clientHeight = Math.max(
      document.body.clientHeight,
      document.documentElement.clientHeight
    )
  }
  return clientHeight
}

// 获取文档完整的高度
const getScrollHeight = () => {
  return Math.max(
    document.body.scrollHeight,
    document.documentElement.scrollHeight
  )
}
const handleScroll = async () => {
  if (getScrollTop() - getClientHeight() - getScrollHeight() <= 0) {
    // const result1 = await GetMvList(100);
    mvList.value = mvListAll.value.data.slice(0, mvList.value.length + 7)
  }
}
</script>
<style lang="less" scoped>
* {
  margin: 0;
  padding: 0;
}
.ShortVideo {
  width: 1100px;
  height: 438px;
  margin: 130px auto 0;
  .video-title {
    width: 1142px;
    height: 40px;
    line-height: 40px;
    display: flex;
    margin-bottom: 24px;
    justify-content: space-between;
    .title-text {
      width: 136px;
      height: 40px;
      line-height: 40px;
      color: #111;
      font-size: 27px weight;
    }
  }
  .video-item {
    position: relative;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    .video-img {
      width: 147px;
      height: 267px;
      background-position: 50%;
      background-size: cover;
      cursor: pointer;
    }
    .video-info-title {
      padding: 16px 0;
      width: 147px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .video-info-title:hover {
      color: #fe3666;
    }
    .video-info-content {
      widows: 68px;
      font-size: 13px;
      color: #999;
    }
    .video-round {
      position: absolute;
      width: 30px;
      height: 30px;
      text-align: center;
      background-color: #ccc;
      border-bottom-right-radius: 30px;
    }
  }
}
</style>
